<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业样式.css">
</head>
<body>
    <div class="box">
        <p class="s1">确认订单</p>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>
                        <img src="./image.png">
                        <p>共享品茶乐趣公道杯闻香杯手工吹制</p>
                        <p>规格：公道杯230ml/手工吹制</p>
                    </td>
                    <td>￥89.00</td>
                    <td>10</td>
                    <td style="color: rgb(219, 40, 40);">￥890.00</td>
                    <td style="color: rgb(105, 170, 101);">删除</td>
                </tr> -->
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="6"><p>共<span></span>件商品，商品合计：<font style="color: rgb(219, 40, 40);"></font></p></th>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
<script>
const arr = [
      { 
        id: '1652038',
        attrsText: '规格：公道杯230ml/手工吹制',
        name: '共享品茶乐趣公道杯闻香杯手工吹制',
        price: '89.00',
        picture:
          'https://yanxuan-item.nosdn.127.net/6aaff130c1d97c60f9931e00734bbad6.png',
        count: 10,
      },
      {
        id: '1096001',
        attrsText: '规格：不锈钢除味皂',
        name: '祛味除腥神器，不锈钢除味皂',
        price: '9.90',
        picture:
          'https://yanxuan-item.nosdn.127.net/b38f9ac476ec494235f4aa80fc8e198c.png',
        count: 2,
      },
      {
        id: '3446012',
        attrsText: '颜色：芭比粉-老款',
        name: '一锅包揽煎烤蒸煮日本爱丽思多功能料理锅',
        price: '299.00',
        picture:
          'https://yanxuan-item.nosdn.127.net/667dbc276e46e31b5a00869b9b1b8ef3.png',
        count: 2,
      },
      {
        id: '1652037',
        attrsText: '规格：黑白对杯',
        name: '茶水分离杯耐热隔热玻璃杯',
        price: '188.00',
        picture:
          'https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg',
        count: 5,
      },
      {
        id: '3504000',
        name: '儿童防污/防蚊T恤110cm',
        attrsText: '颜色：白色草莓（防污） 尺码：160cm',
        price: '89.00',
        picture:
          'https://yanxuan-item.nosdn.127.net/f899c55f36cb74232abb349234d9e676.png',
        count: 5,
      },]
    var tbody=document.querySelector('tbody')
    var span=document.querySelector('span')
    var font=document.querySelector('font')
    var a=1;
    function xr(){
        const strArr = arr.map((ele, index) => {
        const { picture, name, attrsText, price, count } = ele
        return `
          <tr>
                <td>${a++}</td>
                <td>
                <img src="${picture}">
                <p>${name}</p>
                <p>${attrsText}</p>
                </td>
                <td>￥${price}</td>
                <td>${count}</td>
                <td style="color: rgb(219, 40, 40);">￥${(price*count).toFixed(2)}</td>
                <td>
                  <p><a data-index="${index}" class="green" href="javascript:;">删除</a></p>
                </td>
         </tr>`
      }).join('')
      tbody.innerHTML = strArr
    } 
    xr()
    function getPrice(){
      const lcount = arr.reduce((sum, item) => sum + item.count, 0)
      const lprice = arr.reduce((sum, item) => sum + item.count * item.price, 0)
      span.innerHTML=lcount;
      font.innerHTML='￥'+lprice.toFixed(2)
    }
    getPrice()
    tbody.addEventListener("click",function(e){
      if(e.target.tagName==='A'){
        const index=e.target.dataset.index
        arr.splice(index,1)
        xr()
        getPrice()
      }
    }) 
</script>
